<template>
  <div class="home-recommond">
    <div class="top">
      <h2 class="title">热门歌手</h2>
      <div class="part-2">
        <div class="list" v-for="(item, index) in  artists" :key="index">
          <div class="pic">
            <img :src="item.img1v1Url" alt="" />
          </div>
          <div class="text">
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
    artists: [],
    };
  },
  created() {
 
    this.getSingerListData();
  },
  methods: {
 
    getSingerListData() {
      this.$request("get", "/top/artists?offset=0&limit=6").then((res) => {
        console.log(res);
        this.artists = res.artists;
      });
    },
  },
  filters: {
    //处理播放器的显示格式
    // param num:小数位固定位数
    // param value:处理的数值
    numFilter(value, num) {
      //把小数位固定为num位
      return parseFloat(value / 10000).toFixed(num);
    },
  },
};
</script>

<style scoped>
.home-recommond .title {
  padding-left: 5px;
  margin: 15px 0;
  font-size: 17px;
  border-left: 2px solid red;
}
.part-2 {
  display: flex;
  flex-wrap: wrap;
}
.top .list {
  margin: 2px;
  width: calc(33% - 4px);
}
.pic {
  position: relative;
}
.pic img {
  width: 100%;
}
.pic span {
  position: absolute;
  right: 3px;
  top: 3px;
  color: #fff;
  font-size: 12px;
  background: url(../../assets/1.svg);
  background-position: center left;
  padding-left: 28px;
  background-repeat: no-repeat;
  background-size: 60% 60%;
}
.text {
  text-align: center;
  padding: 0 3px;
  font-size: 13px;
}
</style>